<template>
    <el-dialog title="流程详细" :visible.sync="dialogVisible" :fullscreen='true' v-loading="dataLoad">

        <el-row>
            <el-col :span="11" :offset="2">
                <el-card shadow="always" :body-style="{ padding: '20px' }">
                    <div slot="header">
                        <span>流程信息</span>
                    </div>
                    <el-form label-width="80px" :inline="false" size="normal">
                        <el-form-item :label="item.name" v-for="item in formItems" :key="item.name">
                            <!-- 输入框 -->
                            <el-input disabled placeholder="" v-model="item.value" size="normal"
                                v-if="item.type == '0'"></el-input>

                            <!-- 多行文本 -->
                            <el-input disabled placeholder="" v-model="item.value" size="normal" type="textarea"
                                v-if="item.type == '1'" :autosize="{ minRows: 4 }"></el-input>

                            <!-- 下拉 -->
                            <dicSelect :disabled="true" v-if="item.type == '2'" v-model="item.value" :typeCode="item.url"
                                placeholder="请选择" :single="item.many + ''"></dicSelect>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
            <el-col :span="9" :offset="1">

                <el-row>
                    <el-card shadow="always" :body-style="{ padding: '20px' }" v-if="this.status">
                        <div slot="header">
                            <span>操作</span>
                        </div>
                        <el-form :model="form" label-width="80px" :inline="false" size="normal">
                            <el-form-item label="意见">
                                <el-input type="textarea" :rows="4" v-model="form.opinion"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit(0)">同 意</el-button>
                                <el-button type="danger" @click="onSubmit(1)">拒 绝</el-button>
                            </el-form-item>
                        </el-form>

                    </el-card>
                </el-row>
                <el-row>
                    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top: 30px;">
                        <div slot="header">
                            <span>流转详情</span>
                        </div>
                        <el-steps :active="currentNode" align-center direction="vertical">
                            <el-step v-for="(item, i) in flowNode" :key="item.id" :title="item.name">
                                <template slot="description" v-if="i > 0 && item.nodeType != 1">
                                    <el-popover v-for="auditor in item.auditInfoList" :key="auditor.id"
                                        placement="top-start" title="审核信息" width="230" trigger="hover">
                                        <p>审核人：{{ auditor.userName }}</p>
                                        <p>审核结果：<el-tag
                                                :type="auditor.result == null ? 'info' : auditor.result == '0' ? 'success' : 'error'">
                                                {{ auditor.result == null ? '未审核' : auditor.result == '0' ? '同意' : '拒绝'
                                                }}</el-tag>
                                        </p>
                                        <p>审核时间：{{ auditor.auditTime }}</p>
                                        <p>意见：{{ auditor.opinion }}</p>
                                        <el-badge is-dot
                                            :type="auditor.result == null ? 'info' : auditor.result == '0' ? 'success' : 'error'"
                                            slot="reference" class="userHeader">
                                            <el-avatar size="small"> {{ auditor.userName.substring(auditor.userName.length -
                                                2) }} </el-avatar>
                                        </el-badge>
                                    </el-popover>
                                </template>

                                <template slot="description" v-if="i > 0 && item.nodeType == 1">
                                    <el-popover v-for="auditor in item.auditInfoList" :key="auditor.id"
                                        placement="top-start" title="抄送信息" width="230" trigger="hover">
                                        <p>抄送人：{{ auditor.userName }}</p>
                                        <el-badge is-dot
                                            :type="auditor.result == null ? 'info' : auditor.result == '0' ? 'success' : 'error'"
                                            slot="reference" class="userHeader">
                                            <el-avatar size="small"> {{ auditor.userName.substring(auditor.userName.length -
                                                2) }} </el-avatar>
                                        </el-badge>
                                    </el-popover>
                                </template>
                            </el-step>
                        </el-steps>
                    </el-card>
                </el-row>
            </el-col>
        </el-row>

        <span slot="footer">

        </span>
    </el-dialog>
</template>

<script>
import dicSelect from '@/components/dicSelectSingle.vue'
import { getDetail, audit } from "@/api/workFlow/workFlow"

export default {
    props: {
        value: Boolean,
        workFlowId: String,
        status: Boolean
    },
    components: {
        dicSelect
    },
    created() {
        this.loadData()
    },
    data() {
        return {
            dialogVisible: true,
            pri_workFlowId: this.workFlowId,
            dataLoad: false,
            formItems: [],
            flowNode: [],
            form: {
                opinion: '',
                workFlowId: '',
                operation: null,
            },
            currentNode: 0
        }
    },
    watch: {
        dialogVisible(val) {
            this.$emit('input', val)
        },
        value(val) {
            this.dialogVisible = val
        }
    },
    methods: {
        async loadData() {
            let res = await getDetail(this.pri_workFlowId)
            if (res.code == 10000) {
                let { data } = res
                this.formItems = data.formItems
                this.flowNode = data.nodes
                this.currentNode = data.nodes.findIndex(r => r.isCurrentNode)
            }
        },
        onSubmit(result) {
            this.form.operation = result
            this.$confirm(`是否确定${result == 0 ? '同意' : '拒绝'}该流程？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.form.workFlowId = this.pri_workFlowId
                let res = await audit(this.form)
                if (res.code == 10000) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            });
        }
    }
}
</script>

<style scoped>
.userHeader {
    margin-right: 10px;
}
</style>